﻿<!DOCTYPE html>
<html>

<head>
    <title>bearchain</title>
    <!-- css -->
    <link rel="stylesheet" href="static/css/swiper.min.css">
    <link rel="stylesheet" href="static/css/reset.css">
    <link rel="stylesheet" href="static/css/mycss.css">
    <script src="static/js/jquery-1.8.3.min.js"></script>
    <script src="static/js/qrcode.min.js"></script>
</head>

<body>
    <header>
        <div class="inner">
            <div class="h-left">
                <a href="/"><img src="static/picture/logo.png" alt=""></a>
            </div>
            <div class="h-right">
                <a href="/"><span>Home</span></a>
                <a href="/statics/MEP___en.pdf"><span>M.E.P</span></a>
                <!-- <a href="/site/rule"><span>The rules</span></a> -->
                <a href="/site/agreement"><span>Sign up</span></a>
                <a href="/site/vote"><span>Vote</span></a>
                <form action="/site/lan" method="post" id='lang_form'>
                    <select name="language" id="lang_select">
                        <option selected="selected" data-url='/site/seten' value="en">English
                        </option>
                        <option  data-url='/site/setzh' value="zh">中文
                        </option>
                    </select>
                </form>
                <script type="text/javascript">
                    $('#lang_select').change(function() {
                        var url = $('#lang_select option:selected').data('url');
                        window.location.href = url;
                    });
                </script>
            </div>
        </div>
    </header>

    <section><div class="form">
  <!-- 报名 -->
  <form id="infoLogoForm" action="#" method="post" onsubmit="checkip()" enctype="multipart/form-data">
    <h1>“MILLION ECOLOGY PROJECT”Registration</h1>
    <h2 class="h2-title1">· Team information</h2>
    <div class="input1" style="position: relative;">
      *Name:
      <span>Baer </span>
      <input id="username" type="text" name="name" required="required">
      <label style='position: absolute;    position: absolute;left: 386px; line-height: 20px;color: #f00; top: -3px;width: 619px;'>Utify to name team as "Baer + team name", for example,when using "pioneer",the team name will be displayed as "Baer Pioneer".</label>
    </div>
    <!--图片上传1-->
    <div class="img">
      <div >
        <span style="position: relative;">*LOGO:

        <p style="position: absolute;width: 132px;top: 25px;left: 9px;color: #f00">Please add text element "Baer+team name" when designing the Logo.</p>
      </span>
        <div style="width: 325px;height: 174px;background: #F4F5F9;position: absolute;float:right;top:0;left: 160px;border-radius: 5px;">
          <img id="upImg1" style="border: transparent; height: 162px; width:292px;position: absolute;top:-105px;left: 18px;" src="" alt="">
        </div>
        <span class="textN">520 * 260</span>
      </div>
      <input id="inputFile1" type="file" style="display: none">
      <input id="inputFile1_input" name="logo" type='hidden'/>
      <img id="imgFile1" src="static/picture/add.png" alt="">
    </div>
    <!--图片上传2-->
    <div class="img">
      <div>
        <span></span>
        <div style="width: 325px;height: 174px;background: #F4F5F9;position: absolute;float:right;top:0;left: 160px;border-radius: 5px;">
          <img id="upImg2" style="border: transparent; height: 162px; width: 162px;position: absolute;top:-105px;left: 18px;" src="" alt="">
        </div>
        <span class="textN">256 * 256</span>
      </div>
      <input id="inputFile2" type="file" style="display: none">
      <input id="inputFile2_input" name="cover" type='hidden'/>
      <img id="imgFile2" src="static/picture/add.png" alt="">
    </div>
    <div class="input2">
      Official website:
      <input type="text" name="website" style="margin-right: 63px;">
    </div>
    <h2 class="h2-title2">CONTACT INFORMATION</h2>
    <div class="input3">
      *Email:
      <input id="email" type="email" name="email" required="required" style="margin-left:106px">
    </div>
    <div class="input4">
      Twitter:
      <input type="text" name="twitter" style="margin-left:101px">
    </div>
    <h2 class="h2-title3">INTRODUCTION</h2>
    <div class="textarea1">
      <p>*Team Introduction[English]:</p>
      <textarea name="introduction" id="" cols="30" rows="10" required="required"></textarea>
      <p>*Team Introduction[Chinese]:</p>
      <textarea name="introduction_zh" id="" cols="30" rows="10" required="required"></textarea>
    </div>
    <div class="textarea2">
      <p>Election Pronouncement[English]:</p>
      <textarea name="manifesto" id="" cols="30" rows="10"></textarea>
      <p>Election Pronouncement[Chinese]:</p>
      <textarea name="manifesto_zh" id="" cols="30" rows="10"></textarea>
    </div>
    <!-- <div class="input5">
      <label><input type="radio" name="Voting">Voting Agreement</label>
    </div> -->
    <div class="seccode">
      *verification code:
      <img id="codeImg" src="static/picture/c866ed704f1c498184a41fc12e565ee3.gif" >
      <input type="text" name="captcha">
    </div>
    <input class="submit" type="submit" value="SUBMIT">
  </form>
</div>
<style type="text/css">
    .form .seccode {
    width: 385px;
    margin-left: 0;
  }
  
    .form .seccode img {
    width: 108px;
    height: 127%;
  }
</style>
<script type="text/javascript">
    $('#codeImg').click(function () {
        $(this).attr('src', $(this).attr('src'));
    })
</script></section>

    <footer>
        <div id="footer">
            <div class="left">
                <h1>BAER CHAIN</h1>
                <div class="red-div"></div>
                <p class="one">Baer Chain is an online distributed ecological game platform that is based on the
        Blockchain technology</p>
                <!-- <p class="two">Copyright @2016-2017 Beerlink.com Bell chain blockchain all rig</p> -->
            </div>
            <div class="right">
                <h1>CONTACT US</h1>
                <div class="red-div"></div>
                <div class="ico">
                    <a href="https://www.facebook.com/baer.chain"><img src="static/picture/10.png" alt=""></a>
                    <a href="https://twitter.com/BaerChain?s=05"><img src="static/picture/11.png" alt=""></a>
                    <a href="https://0.plus/#/BaerChainCN"><img src="static/picture/12.png" alt=""></a>
                    <a href="/cdn-cgi/l/email-protection#3e5c5f5b4c5d565f57507e5c5f5b4c5d565f575010505b4a"><img src="static/picture/15.png" alt=""></a>
                    <a href="https://weibo.com/6667329799/profile?rightmod=1&wvr=6&mod=personinfo"><img src="static/picture/14.png" alt=""></a>
                </div>
            </div>
        </div>
        <!--  <h3>其它页面</h3>-->
        <!--  <ul>-->
        <!--    <li>-->
        <!--      <a href="/site/vote">投票页面</a>-->
        <!--    </li>-->
        <!--    <li>-->
        <!--      <a href="/site/enroll">报名页面</a>-->
        <!--    </li>-->
        <!--    <li>-->
        <!--      <a href="/site/rule">规则页面</a>-->
        <!--    </li>-->
        <!--    <li>-->
        <!--      <a href="/site/info">节点详情页面</a>-->
        <!--    </li>-->
        <!--  </ul>-->
    </footer>


    <script data-cfasync="false" src="static/js/email-decode.min.js"></script><script src="static/js/jquery.min.js"></script>
    <script src="static/js/swiper.min.js"></script>
    <!-- <script src="static/js/qrcode.min.js"></script> -->
    <script>
        // 轮播
        var mySwiper = new Swiper('.swiper-container', {
            // autoplay: true,//可选选项，自动滑动
            slidesPerView: 5,
            slidesPerGroup: 5,
            spaceBetween: 20,
            loop: true,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        })

        //表单验证提交
        function checkip() {
            var username = $("#username").val();
            var img1 = $("#inputFile1_input").val();
            var img2 = $("#inputFile2_input").val();
            var email = $("#email").val();
            var teamI = $(".textarea1").val();

            if (username && img1 && img2 && email && teamI) {
                alert('请上传图片，并填写所有必填项目');
                return false;
            } else {
                return true;
            }
        }

        // 投票
        $(document).ready(function() {
            var a = '';
            $('.one-ico div').mouseover(function() {
                var pval = $(this).find('p').text();
                var bg_img = $(this).data('img');
                if (pval) {
                    $(this).css('background-image', "url('"static/images/4d5222b9d2814a09b681d8a3c12864ea.gif"')");
                    $(this).find('p').css('display', 'block');
                }
            })

            $('.one-ico div').mouseout(function() {
                var pval = $(this).find('p').text();
                var bg_img = $(this).data('img');
                if (pval) {
                    $(this).css('background-image', "url('"static/images/4d5222b9d2814a09b681d8a3c12864ea.gif"')");
                    $(this).find('p').css('display', 'none');
                }
            })

            // 图片上传按键
            $('#imgFile1').click(function() {
                $('#inputFile1').click();
            })
            $('#imgFile2').click(function() {
                $('#inputFile2').click();
            })

            //遮罩层
            $('#video-img').click(function() {
                $(".video-playbody").css("display", "flex");
                $('body').css('overflow', 'hidden');
            })

            $('.video-playbody > button').click(function() {
                $(".video-playbody").css("display", "none");
                $('body').css('overflow', 'visible');
                var video = document.getElementById("diveoID2")
                video.load();
            });

            //添加div遮罩层
            $(".one-ico").mouseover(function() {
                $(this).find(".one-shade").css('background', 'rgba(1, 1, 1, 0.5)');
            });

            $(".one-ico").mouseout(function() {
                $(this).find(".one-shade").css('background', 'transparent');
            });

            //点击图片开始播放
            // $(".play > img").click(function () {
            //     // alert(1111)
            //     var video = document.getElementById("diveoID")
            //     video.play();
            //     $(".play").css('display', 'none')
            //     $("#diveoID").css('width', '50.1%')
            //     a = 1;
            // })

            //点击video的时候退出
            // $("#diveoID").click(function () {
            //     if (a == 1) {
            //         var video = document.getElementById("diveoID")
            //         video.load();
            //         $(".play").css('display', 'flex')
            //         $("#diveoID").css('width', '100%')
            //         a = '';
            //     }
            // })

            //缩略图
            // $("#inputFile").change(function(){
            //   // console.log(11111)
            //   var preview = document.querySelector("#upImg");
            //   var file = document.querySelector("input[type=file]").files[0];
            //   var reader = new FileReader();
            //   if(file){
            //     reader.readAsDataURL(file);
            //   }else{
            //     preview.src = '';
            //   }
            //
            //   reader.onloadend = function(){
            //     preview.src = reader.result;
            //   }
            // })

            //ajax 上传图片
            var uploading = false;

            $("#inputFile1").on("change", function(e) {
                if (uploading) {
                    alert('文件正在上传，请稍后……');
                    return false;
                }
                var file = e.currentTarget.files[0];
                var formData = new FormData();
                formData.append('file', file);
                $.ajax({
                    url: "/files/upload ",
                    type: 'POST',
                    cache: false,
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    beforeSend: function() {
                        uploading = true;
                    },
                    success: function(data) {
                        if (data.hash != '') {
                            $("#upImg1").attr("src", '/images/' + data.hash + '.png');
                            $('#inputFile1_input').val(data.hash)
                        } else {
                            alert(data.msg);
                        }
                        uploading = false;
                    }
                })
            })

            var uploading2 = false;

            $("#inputFile2").on("change", function(e) {
                if (uploading2) {
                    alert('文件正在上传，请稍后……');
                    return false;
                }
                var file = e.currentTarget.files[0];
                var formData = new FormData();
                formData.append('file', file);
                $.ajax({
                    url: "/files/upload ",
                    type: 'POST',
                    cache: false,
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    beforeSend: function() {
                        uploading2 = true;
                    },
                    success: function(data) {
                        if (data.hash != '') {
                            $("#upImg2").attr("src", '/images/' + data.hash + '.png');
                            $('#inputFile2_input').val(data.hash)
                        } else {
                            alert(data.msg);
                        }
                        uploading2 = false;
                    }
                })
            })

            //判断userID生成二维码
            $("#username").blur(function() {
                var useID = $("#username").val();
                var codeImg = $("#codeImg");
                var path = '';
                if (useID) {
                    codeImg.css('display', 'block');
                    path = '/site/captcha?name=' + useID;
                    codeImg.attr('src', path);
                } else {
                    codeImg.css('display', 'none');
                }
            })

            //判断必填信息，提交表单
            // $(".submit").on('click',function(){
            //     if($("#inputFile2_input").val() && $("#inputFile1_input").val()){
            //       alert('请上传图片并填写其他必选项目');
            //     }
            // })
            // $("#inputFile1").change(function () {
            //     $.post("/files/upload",
            //         {
            //             logo: document.querySelector("#inputFile1").files[0],
            //         },
            //         function (data, status) {
            //             console.log("数据: \n" + data + "\n状态: " + status);
            //         }
            //     )
            // })

            // $("#inputFile2").change(function () {
            //     $.post("/files/upload",
            //         {
            //             cover: document.querySelector("#inputFile1").files[0],
            //         },
            //         function (data, status) {
            //             console.log("数据: \n" + data + "\n状态: " + status);
            //         }
            //     )
            // })
        })
    </script>
    </body>

</html> 